Download Project

Introduction

In this post, I would like to explain Part 5 - How to use AngularJS in ASP.NET MVC.

Steps :

Step-1: Add input text and button in the Index Page. 

Go to Solution Explorer > Views Folder> Home Folder> in the Index.cshtml added an input text and button with writing the below code.

       <div class="row">

                <div class="col-md-12">
                    <div class="form-group">
                        <input type="text" ng-model="txtMessage" class="form-control" />
                    </div>
                </div>
            </div>

            <div class="row">

                <div class="col-md-3">
                    <input type="button" ng-click="ShowData()" class="btn btn-primary" value="Show Message" />
                </div>
            </div>

Step-2: Download angular.min.js.

Go to browser > search angular.min.js >download it > OK

Step-3: Add angular.min.js file.

Downloaded angular.min.js .
Go to Solution Explorer > Scripts Folder.> in this folder paste the above file> Above file drag and drop in the Index.cshtml with writing the below code.

<script src="~/Scripts/angular.min.js"></script>

Step-4: Create TestAngularControllerJS.js file.

 
Go to Solution Explorer > Scripts Folder.> Create new folder and name it AngularController>In this folder create above file js> in TestAngularControllerJS.js file  with writing the below code.

var MyApp = angular.module("ABCApp", []);

MyApp.controller("TestAngularController", function($scope) {


    $scope.ShowData = function() {


        var Mes = "";
        Mes = $scope.txtMessage;

        alert(Mes);

        $scope.txtMessage = "";
    };
});

Step-5: Add TestAngularControllerJS.js file in  Index.cshtml.

Index.cshtml page Drag & drop TestAngularControllerJS.js file with writing the below code.

<script src="~/Scripts/AngularController/TestAngularControllerJS.js"></script>

Step-6: Modify Index.cshtml  page.

Now add some html & angularjs code with writing the below highlight code.

<div ng-app="ABCApp" ng-controller="TestAngularController">
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Dashboard</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Dashboard v1</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">


            <div class="row">

                <div class="col-md-12">
                    <div class="form-group">
                        <input type="text" ng-model="txtMessage" class="form-control" />
                    </div>
                </div>
            </div>

            <div class="row">

                <div class="col-md-3">
                    <input type="button" ng-click="ShowData()" class="btn btn-primary" value="Show Message" />
                </div>
            </div>

      
     
        </div>
    </section>
</div>
</div>
<script src="~/Scripts/angular.min.js"></script>

    <script src="~/Scripts/AngularController/TestAngularControllerJS.js"></script>

Step-7: Run Application.